<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }

    #buttons {
        position: absolute;
        right: 10px;
    }

    #buttons div {
        border: 1px solid gray;
        margin-top: 10px;
        color: white;
        background-color: blue;
        padding: 3px;
        cursor: pointer;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        .glb中的动作切换
        1. pause, stop 
        2. weight
    </div>

    <div id="buttons">
        <div id="idle">Idle </div>
        <div id="run">Run </div>
        <div id="tPose">TPose</div>
        <div id="walk">Walk </div>
    </div>

    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0.5, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);


        // 2. 打光
        {
            const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
            directionalLight.position.set(6, 6, 6);
            scene.add(directionalLight)
            directionalLight.castShadow = true;

            const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
            hemiLight.position.set(0, 7, 0);
            scene.add(hemiLight);
        }

        {
            // 地板
            const mesh = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
            mesh.rotation.x = - Math.PI / 2;
            mesh.receiveShadow = true;
            scene.add(mesh);
        }

        // 3. 添加glb文件
        const loader = new GLTFLoader();
        let mixer;
        let clipActions = []
        loader.load('../../three.js-r151/examples/models/gltf/Soldier.glb', function (gltf) {
            console.log("gltf", gltf);
            scene.add(gltf.scene);
            gltf.scene.rotateY(Math.PI * 5 / 4);

            gltf.scene.traverse(function (object) {
                if (object.isMesh) object.castShadow = true;
            });

            //包含关键帧动画的模型作为参数创建一个播放器
            mixer = new THREE.AnimationMixer(gltf.scene);
            // gltf.animations[0] Idle  休息
            // gltf.animations[1] Run   跑步
            // gltf.animations[2] TPose T形静止展开
            // gltf.animations[3] Walk  走路
            clipActions = gltf.animations.map(animation => mixer.clipAction(animation))
            actionState = clipActions[2]
        });


        const clock = new THREE.Clock();

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)

            // 更新播放器相关的时间
            mixer && mixer.update(clock.getDelta());
        }
        render();

        // 指向始终在运行的动画
        let actionState;
        {
            // 监听函数
            // 通过UI按钮控制，切换动画运动状态
            Array.from(document.querySelectorAll("#buttons div")).forEach((dom, i) => {
                console.log("dom", dom);
                dom.addEventListener('click', function () {
                    //1. 播放状态动画终止, 否则会两个同时运行，奇怪
                    actionState.stop(); 

                    // 2. 可以通过weight来切换动作
                    // actionState.weight = 0;
                    // clipActions[i].weight = 1;

                    clipActions[i].play();
                    actionState = clipActions[i];
                })
            })
           
        }

    </script>
</body>

</html>